<template>
  <base-breadcrumb class="authManage-container">
    <a-row
      :gutter="10"
      class="page-height"
    >
      <!-- 树搜索 -->
      <a-col :span="6">
        <a-card class="page-height-tree">
          <title-name title="公司组织架构"></title-name>
          <!-- 公司组织树搜索 -->
          <tree-organization
            ref="treeOrganization"
            :expandByAuto="true"
            :selectedKeys.sync="selectedKeys"
            :selectOptions.sync="selectOptions"
            :containVirtual="true"
            :showChildWithSearch="true"
            @onSelect="handleSelect"
            @searchEmpty="handleSearchEmpty"
            :autoSelect="false"
            :istakeOutHight="true"
          />
        </a-card>
      </a-col>
      <a-col
        :span="18"
        class="page-height-list-wrapper"
      >
        <searchData
          :searchData="searchArr"
          @search="handleSearch"
        ></searchData>
        <a-card class="page-height-list">
          <!-- <title-name title="用户信息列表"></title-name> -->
          <div
            class="pub-table-select-count"
            style="margin: 0 0 10px"
          >
            <a-icon
              type="info-circle"
              theme="twoTone"
            />
            <span>
              共计：
              <a>{{ statisticsInfo.totalNum || 0 }} 个</a>
            </span>
          </div>
          <list-table
            ref="table"
            :columns="columns"
            :request="loadData"
            :alert="true"
            rowKey="id"
          >
            <template
              slot="sort"
              slot-scope="text, record, index"
            >
              <span>{{ index + 1 }}</span>
            </template>
            <template
              slot="postPNames"
              slot-scope="text"
            >
              <div
                class="ellipsis"
                :title="filterPostPName(text)"
              >{{ filterPostPName(text) }}</div>
            </template>
            <template
              slot="action"
              slot-scope="text, record"
            >
              <a
                class="base-btn"
                @click="handleUpdate('look', record)"
                v-btnPermission="'sy_008_loo_01'"
              >查看</a>
              <a-divider
                type="vertical"
                v-btnPermission="'sy_008_man_02'"
              />
              <a
                class="base-btn"
                @click="handleUpdate('auth', record)"
                v-btnPermission="'sy_008_man_02'"
              >授权</a>
            </template>
          </list-table>
        </a-card>
      </a-col>
    </a-row>
    <jurisdictionUpdate
      :visible="visible.auth"
      @handleCancel="visible.auth = false"
      :record="childInitData"
    />
  </base-breadcrumb>
</template>
<script>
import jurisdictionUpdate from '@/views/systemManage/jurisdictionManage/jurisdictionUpdate.vue'
import { getOneOrgUsers } from '@/api/commons.js'
import TreeOrganization from '@/components/businessComponents/TreeOrganization' // 树
import { STable } from '@/components'
const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    width: '65px',
    scopedSlots: { customRender: 'sort' }
  },
  {
    title: '用户名称',
    dataIndex: 'name'
  },
  {
    title: '员工编号',
    dataIndex: 'jobNum'
  },
  {
    title: '电话号码',
    dataIndex: 'phoneNum'
  },
  {
    title: '当前所在岗位',
    dataIndex: 'postPNames'
    // scopedSlots: { customRender: 'postPNames' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '120px',
    scopedSlots: { customRender: 'action' }
  }
]
const searchArr = [
  {
    name: '用户名称',
    value: 'nameLike',
    type: 'input'
  },
  {
    name: '工号',
    value: 'jobNumLike',
    type: 'input'
  },
  {
    name: '电话',
    value: 'phoneLike',
    type: 'input'
  },
  {
    name: '岗位',
    value: 'postNameLike',
    type: 'input'
  }
]
export default {
  name: 'authManage',
  components: {
    TreeOrganization,
    STable,
    jurisdictionUpdate
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      childInitData: {},
      visible: {
        update: false,
        auth: false
      },
      selectedKeys: [], // 选中节点
      selectOptions: {}, // 选中节点对象
      queryParam: {},
      statisticsInfo: {
        totalNum: 0
      }
    }
  },
  mounted() {
    // 组织树获取数据
    this.$refs.treeOrganization.getList()
  },
  methods: {
    handleSearchEmpty() {
      this.selectedKeys = []
      this.selectOptions = {}
    },
    handleSelect(e) {
      this.handleSearch({
        rootOrgId: e.id || void 0
      })
    },
    filterPostPName(val) {
      if (val === null) return ''
      return (
        val.reduce &&
        val.reduce((pre, cur) => {
          return pre === '' ? cur : pre + '、' + cur
        }, '')
      )
    },
    async loadData(parameter) {
      const requestParameters = Object.assign({}, parameter, this.queryParam, {
        pageNumber: parameter.pageNo,
        queryPostRelation: true
      })
      return getOneOrgUsers(requestParameters).then((res) => {
        // res.code = res.status;
        res.totalSize = res.data.total
        res.data = res.data.list
        this.statisticsInfo.totalNum = res.total || 0
        return res
      })
      /* try {
        const res = await getOneOrgUsers(requestParameters)
        this.statisticsInfo.totalNum = res.data.total || 0
        return {
          data: res.data.list,
          currentPage: requestParameters.pageNumber,
          totalSize: res.data.total,
        }
      } catch (e) {
        return Promis.reject(e)
      } */
    },
    handleUpdate(type, data = {}) {
      if (type === 'auth') {
        this.childInitData = { ...data, id: data.userId }
        this.visible.auth = true
        return
      }
      this.$router.push({
        path: '/systemManage/menuPermissions/authManage/UpdateAuthManage',
        query: {
          pageType: type,
          id: data.id || '',
          userId: data.userId || ''
        }
      })
    },
    handleSearch(val) {
      this.queryParam = {
        ...this.queryParam,
        ...val
      }
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style lang="less" scoped>
.ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
</style>
